html,body{
   height: 100%;
}
body {
   background: url("../images/bg.jpg");
}
// 公共类样式边框图片
.borderImg {
   border-image: url("../images/border.png") 51 38 21 132;
   border-image-width: 2.125rem 1.5833rem .875rem 5.5rem;
}

//定义一个动画集
@keyframes move {
    0% {
       transform: translateY(0);
    }
    100% {
       transform: translateY(-15rem);
    }
}



// 主体内容区域
.view {
    // 设置logo
    background: url("../images/logo6.png") no-repeat;
    background-size: contain;
    padding: .8333rem .8333rem;
    min-width: 42.6667rem;
    max-width: 80rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}

// 左侧盒子
.leftBox {
   flex: 3;
   margin-top: 3.5833rem;
  //顶部第一个子盒子
  .top_one_Left {
     width: 100%;
     height: 4.5833rem;
     margin-bottom: .8333rem;
     padding: 1.0417rem  1.25rem 0;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     h4 {
        font-size: 1.0833rem;
        margin-bottom: .5833rem;
     }
     p {
        font-size: .6667rem;
        color: #006cff;
     }
  }

  //顶部第二个盒子
  .top_two_left {
     height: 19.7917rem;
     margin-bottom: .8333rem;

     .title {
         height: 2.5rem;
         line-height: 2.5rem;
         padding-left: 1.25rem;
         display: flex;
         .line {
            width: .1667rem;
            height: .9167rem;
            background-color: #00f2f1;
            margin: .8333rem 1.0833rem;
         }
         h4 {
            color: #006cff;
            font-size:  .8333rem;
            cursor: pointer;
         }
         h4.active {
            color: #fff;
         }
     }

     // 子标题
     .subtitle {
        height: 1.5833rem;
        line-height: 1.5833rem;
        padding: 0 1.25rem;
        background-color: rgba(255, 255, 255, 0.1);
        span {
            color: #00f2f1;
            &:nth-child(2) {
               margin: 0 8.6667rem 0  3.4583rem;
            }
        }
     }

     //内容盒子
     .content {
        height: 15rem;
        overflow: hidden;
        .item {
            li {
               padding: 0 1.25rem;
               height: 1.5rem;
               line-height: 1.5rem;
               color: #006cff;
               &:hover {
                  background-color: rgba(255, 255, 255, 0.1);
                  cursor: pointer;
               }
            }
            span:nth-child(2) { 
               margin: 0  5.3333rem  0  3.5833rem;
            }

            animation: move 20s linear infinite;
            
            &:hover {
              //  鼠标悬停暂停动画
               animation-play-state: paused;
            }
        }
     }


  }

  // 顶部第三个盒子
  .top_three_left {
      height: 14rem;
      .title  {
           height: 2.9167rem;
           line-height: 2.9167rem;
           padding-left: 1.25rem;
           h4 {
             font-size: .9167rem;
             color: #fff;
           }
      }
      // 内容区域
      .content {
         height: 10rem;
         padding: 0 1.25rem;
         display: flex;
         justify-content: space-between;
         .leftPie {
             flex: 1;
             height: 9.9167rem;
         }
         .rightPublicBox {
             width: 7rem;
             height: 9.9167rem;
             background: url("../images/rect.png") no-repeat;
             padding-left: 1.25rem;
             padding-top: 1.5rem;
             box-sizing: border-box;
             h3 {
                font-size: 1rem;
             }
             p {
                margin-top: .5rem;
                font-size: .75rem;
                color:#006cff;
             }
             .item:nth-child(1) {
                 margin-bottom: 2.0833rem;
             }
         }
      }
  }
}


// 中间盒子
.middleBox {
   flex: 4;
   margin-left: .8333rem;
   margin-right: .8333rem;
   margin-top: 5.4167rem;
   // 标题区域
   .title {
       span {
          font-size: .8333rem;
       }
       h3 {
          font-size: .8333rem;
          color: #fff;
       }
   }
   // 地图区域
   .map {
       height: 21.6667rem;
       margin-top: .6667rem;
   }

   //柱状图区域
   .lineBox {
       height: 14rem;
       margin-top: .8333rem;

       //  标题区域
       .title {
            height: 2.9167rem;
            line-height: 2.9167rem;
            padding-left: 1.25rem;
            h4 {
            font-size: .9167rem;
            color: #fff;
            }
      }
      // 内容区域
      .content {
         height: 10rem;
         padding: 0 1.25rem;
         display: flex;
         justify-content: space-between;
         .leftBar {
             flex: 1;
             height: 9.9167rem;
         }
         .rightPublicBox {
             width: 7rem;
             height: 9.9167rem;
             background: url("../images/rect.png") no-repeat;
             padding-left: 1.25rem;
             padding-top: 1.5rem;
             box-sizing: border-box;
             h3 {
                font-size: 1rem;
             }
             p {
                margin-top: .5rem;
                font-size: .75rem;
                color:#006cff;
             }
             .item:nth-child(1) {
                 margin-bottom: 2.0833rem;
             }
         }
      }
   }
}

// 右侧盒子
.rightBox {
   flex: 3;
   margin-top: 3.5833rem;
   // 右侧第一个盒子
   .right_top1 {
       height: 6.0417rem;

      //  标题区域
       .title {
           padding-left: 1.25rem;
           padding-top: 1rem;
           display: flex;
           a {
             color: #006cff;
             font-size: .75rem;
           }
           a.active {
             color:  #fff;
           }
           .line {
              width: .1667rem;
              height: .8333rem;
              background-color:#00f2f1;
              margin: .0833rem  .75rem  0;
           }
       }

      // 内容区域
      .content {
         padding-left: 1.25rem;
         position: relative;
          .item {
             display: flex;
             height: 3.75rem;
             width: 14.5833rem;
             justify-content: space-between;
             align-items: center;
             position: absolute;
             h3 {
                font-size: .8333rem;
             }
             p {
                font-size: .75rem;
                color: #006cff;
             }
          }
      }
   }

   // 右侧第二个盒子
   .right_top2 {
      height: 10.25rem;
      margin: .8333rem 0;

      .title {
          padding-left: 1.25rem;
          padding-top: .8333rem;
          display: flex;
          h3 {
             font-size: 1rem;
             color: #fff;
          }
          .line {
              width: .1667rem;
              height: 1rem;
              background-color:#00f2f1;
              margin: .2083rem .625rem 0;
          }
          a {
             width: 1rem;
             height: 1rem;
             text-align: center;
             line-height: 1rem;
             color:#006cff;
             margin: .2083rem  .625rem;
          }
          a.active {
             color: #fff;
             background-color: #4c9bfd;
             border-radius: .125rem;
          }
      }
      .content {
         padding: 0 1.25rem;
         .rightBox_lineBox {
             height: 7.75rem;
         }
      }  
   }

   // 右侧第三个盒子
   .right_top3 {
       height: 230px;
       margin-bottom: .8333rem;
       display: flex;
       .leftitem {
         height: 100%;
         flex: 1;
         margin-right: .8333rem;

         .title{
             padding-left: 1.25rem;
             height: 2.75rem;
             line-height: 2.75rem;
             h3 {
                font-size: .9167rem;
                color: #fff;
             }
         }

         .content {
            padding: 0 1.25rem;

            .item {
                float: left;
                h3 {
                   font-size: 1.1667rem;
                   color: #fff;
                }
                p {
                   color: #006cff;
                   margin-top: .2083rem;
                }
                margin-bottom: .4167rem;
            }
            .item:nth-child(2n) {
                margin-left: 3.3333rem;
            }
         }
       }

       .rightitem {
          height: 100%;
          flex: 1;
         .title{
            padding-left: 1.25rem;
            height: 2.75rem;
            line-height: 2.75rem;
            h3 {
                  font-size: .9167rem;
                  color: #fff;
               }
         }
         // 饼状图盒子
         .priBox {
             height: 2.75rem;
             margin: 0 1.25rem;
             overflow: hidden;
         }
         // 内容区域
         .content {
             position: relative;
             p {
               position: absolute;
               left: 50%;
               top: 50%;
               transform: translateX(-50%) translateY(-30%);
               font-size: 1.1667rem;
               color: #fff;
             }
         }

         // 结尾区域
         .footer {
             padding: 0 1.25rem;
             margin-top: .4167rem;
             .item {
               float: left;
               h3 {
                  font-size: 1.1667rem;
                  color: #fff;
               }
               p {
                  color: #006cff;
                  margin-top: .2083rem;
               }
               margin-bottom: .4167rem;
           }
           .item:nth-child(1) {
              margin-right: 3.3333rem;
           }
         }
       }
   }
   // 右侧第四个盒子
   .right_top4 {
       height: 11.6667rem;

       .title{
          height: 2.5rem;
          line-height: 2.5rem;
          font-size: 1rem;
          color: #fff;
          padding: 0 1.25rem;
          display: flex;
          justify-content: space-between;
          span:last-child {
             font-size: .5833rem;
             color: #0bace6;
          }
       }

       .content {
          padding: 0 1.25rem;
          display: flex;
          justify-content: space-between;
          .list1 {
             width: 7.0833rem;
             li {
                height: 2.5rem;
                line-height: 2.5rem;
                span {
                   display: inline-block;
                   vertical-align: middle;
                }
                span:first-child {
                   font-size: 1.4167rem;
                }
                span:last-child { 
                   font-size: .5833rem;
                   color: #0bace6;
                   margin-left: .625rem;
                   
                }
             }
          }

          .list2 {
             width: 6.5833rem;
             height: 7.9167rem;
             li {
                height: 1.3333rem;
                line-height: 1.3333rem;
                display: flex;
                justify-content: space-around;
                align-items: center;
                cursor: pointer;
                color: #0bace6;
             }
             .active {
                background-color: rgba(255, 255, 255, 0.1);
             }
          }

          .list3 {
             width: 6.5833rem;
             height: 7.9167rem;
             li {
                height: 1.3333rem;
                line-height: 1.3333rem;
                display: flex;
                justify-content: space-around;
                align-items: center;
                cursor: pointer;
             }
             background-color: rgba(255, 255, 255, 0.1);
          }
       }
   }
}